<script lang="ts">
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
import { lightInputTheme } from './antdConfig';

type TAllComponentMap = Required<NonNullable<ThemeConfig['components']>>;
type TAllComponentsName = keyof TAllComponentMap;
type TComponentsThemes = typeof componentsThemes;
type TComponentsThemesKeys = keyof TComponentsThemes;

const componentsThemes = {
  Input: {
    light: {
      ...lightInputTheme,
    },
  },
  Select: {
    light: {
      ...lightInputTheme,
    },
  },
  Popover: {},
  Pagination: {},
} satisfies Partial<{
  [K in TAllComponentsName]: Record<string, TAllComponentMap[K]>;
}>;
</script>

<script setup lang="ts" generic="CN extends TComponentsThemesKeys">
const props = defineProps<{
  /**
   * 组件名
   */
  component: CN;
  /**
   * 主题名
   */
  theme?: keyof TComponentsThemes[CN];
  /**
   * 自定义主题
   */
  token?: TAllComponentMap[CN];
}>();

const themeConfig = computed(() => ({
  components: {
    [props.component]: {
      ...props.theme ? componentsThemes[props.component][props.theme] : {},
      ...(props.token || {}),
    },
  },
}));
</script>

<template>
  <AConfigProvider :theme="themeConfig">
    <slot />
  </AConfigProvider>
</template>
